<template>
    <div class="bg">
        <nav-com title="申请退货退款" :showView='true' @back="backHandler()"></nav-com>
        <div style="background-color: white; margin: 10px 15px;border-radius: 10px;;line-height: 40px;">
            <div v-if="data.logs != null" v-for="(item,index) in data.logs" :key="index" >
                 <div style="display:flex;padding-left: 10px">
                    {{item.reason}}
                </div>
                <v-html  style="display:flex;padding-left: 10px;color: #808080;font-size: 13px;line-height: 15px;">
                    {{item.content}}
                </v-html>
                <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px;color: #808080;font-size: 15px;line-height: 30px;">
                   {{item.createtime | formatDateTime}}
                </div>
           </div>
            
        </div>
        <!-- <div style="background-color: white; margin: 10px 15px;border-radius: 10px;;line-height: 40px;">
            <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px">
                卖家留言
            </div>
            <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px;color: #808080;font-size: 10px;line-height: 30px;">
                您好，请帮忙把产品寄回一下地址 
                收件人：郝女士       
                收件地址：广东省深圳市龙华区255号
            </div>
        </div> -->

        <div style="background-color: white; margin: 10px 15px;border-radius: 10px;;line-height: 40px;">
            <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px;color: #808080;font-size: 12px;line-height: 30px;">
                售后编号：{{data.aftersale_sn}}
            </div>
            <div style="border-bottom: 1px solid #DCDCDC;padding: 10px;display: flex;">
                <!-- <div style="width:83px;height:83px">
                    <img v-if="data.images"  style="width:83px;height:83px" :src="data.images[0]" alt="">
                </div> -->
                <div style="padding-left: 10px;">
                    <div style="color:#000000;font-size:15px;line-height: 30px;"><span style="display:inline-block; width:80px; font-weight:700">手机号：</span>{{data.phone}}</div>
                    <div style="color:#000000;font-size:15px;line-height: 30px;"><span style="display:inline-block; width:80px; font-weight:700">数量：</span>1</div>
                    <div style="color:#000000;font-size:15px;line-height: 30px;"><span style="display:inline-block; width:80px; font-weight:700">金额：</span>￥{{data.fee}}</div>
                    <div style="color:#000000;font-size:15px;line-height: 30px;"><span style="display:inline-block; width:80px; font-weight:700">描述信息：</span></div>
                    <div style="width:80vw;word-wrap:break-word;line-height:22px">{{data.desc}}</div>
                    <div style="color:#000000;font-size:15px;line-height: 30px;"><span style="display:inline-block; width:80px; font-weight:700">图片描述：</span></div>
                    <div style="display:flex">
                       <div v-for="(item,index) in data.images" :key="index" >
                            <img :src="item" style="width:28vw">
                       </div> 
                    </div>
                    
                </div>
            </div>
            <div style="display:flex;padding-left: 10px;color: #808080;font-size: 12px;line-height: 25px;">
                申请时间：{{data.createtime | formatDateTime}}
            </div>
            <div style="display:flex;padding-left: 10px;color: #808080;font-size: 12px;line-height: 25px;">
                退款金额：￥{{data.refund_fee}}
            </div>
            <!-- <div style="display:flex;padding-left: 10px;color: #808080;font-size: 12px;line-height: 25px;">
                补充说明：
            </div> -->
        </div>
        <!-- <div v-for="item in data.btns" v-if="item=='cancel'" @click="cancelSubmit" style="color: #FFFFFF;margin:0 auto;text-align: center;width: 300px;line-height: 50px;background: #FE4B20;border-radius: 50px;margin-top: 50px;">取消售后</div> -->

    </div>
    
</template>
<script>
import { iReturnGoods,orderAfterDetail,orderAfterCancel} from '@/api/api'
import navCom from '@/component/nav'
import { Field } from 'vant';
import { Uploader } from 'vant';
import { Dialog } from 'vant';

export default {
    name:'orders',
    components:{
        navCom
    },
    data() {
        return {
            show:true,
            id:"",
            fileList: [],
            data:{}
        }
    },
    filters: {
	/*
        时间格式自定义 只需把字符串里面的改成自己所需的格式
        */
        formatDateTime:function(date) {
            var date = new Date(date*1000);
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var Hours = date.getHours();
            if (Hours >= 0 && Hours <= 9) {
                Hours = "0" + Hours;
            }
            var Minutes = date.getMinutes();
            if (Minutes >= 0 && Minutes <= 9) {
                Minutes = "0" + Minutes;
            }
            var Seconds = date.getSeconds();
            if (Seconds >= 0 && Seconds <= 9) {
                Seconds = "0" + Seconds;
            }
            var currentDate = date.getFullYear() + "-" + month + "-" + strDate
                    + " " + Hours + ":" + Minutes + ":" + Seconds;
            return currentDate;
        }
        
    },

    mounted(){
        this.getReturnOrder();
    },
    methods:{
        // 获取退货订单
        getReturnOrder(){
            iReturnGoods().then((res) => {
                console.log(res)
                if(res.data.code == 1){
                    this.data = res.data.data.data[0]
                    console.log(this.data)
                }else{
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            }).catch((err) => {
                
            });
        },
        //返回
        backHandler(){
            this.$router.go(-1)
        },
       
        //初始化
        init(){
            this.getDataHanlder("range")
        },
        cancelSubmit(){
            let data = {
                id:this.$route.params.id
            }
            orderAfterCancel(data).then(res=>{
                console.log("orderAfterCancel",res);
                if(res.data.code==1){
                    this.$dialog.alert({
                        message:res.data.msg
                    }).then(()=>{
                        this.$router.back() 
                     })
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
        //获取数据
        getDataHanlder(){
            let data = {
                id:this.$route.params.id
            }
            orderAfterDetail(data).then(res=>{
                console.log("orderAfterDetail",res);
                if(res.data.code==1){
                    this.data = res.data.data
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
    }
}
</script>
<style scoped>
    .bg{
        height: 100vh;
        background-color: #f2f3f7;
    }
    .van-cell-group {
        background-color:#f7f7f7;
    }
    .van-cell {
        font-size: 10px!important;
        background-color:#f7f7f7;
        border: 0 solid #f7f7f7;
   
    }
    .van-cell ::after {
    border: 0 solid #f7f7f7;
    }
    .van-uploader__upload-text {
    /* margin-top: 8px; */
    color: #969799;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>
<style>
.van-uploader__upload {
    border: 1px solid #E0E0E0!important;
}
.van-uploader__upload-text {
    margin-top: 0px!important;
}
</style>